<template>
	<view class="login" @touchmove.stop.prevent="$stopEvent()">
		<view class="login_warp">
			<div class="login_warp_p">
				<view class="lgoo_top">
					<image class="autoImg" src="/static/logo.png" mode=""></image>
				</view>
				<view class="">打造全球专业的创业信息平台</view>
				<input v-model="phoneNum" placeholder-style="placeStyle" class="login_input phone" placeholder="请输入手机号" type="number" maxlength="11" />
				<input v-model="password" placeholder-style="placeStyle" class="login_input safe" placeholder="请输密码" type="password" maxlength="16" />

				<button :loading="isLoading" class="login_btn loginIn" @click="loginIn">立即登录</button>
				<button class="login_btn" @click="$navTo('./forget')">忘记密码</button>
			</div>
			<view class="register_btn" @click="$navTo('./regist')">没有账号？立即注册</view>
		</view>

		<view class="btn_xy">登录/注册即代表同意<view class="" @click="$toXy('用户服务协议','10010001')">《用户服务协议》</view></view>
	</view>
</template>

<script>
	import { baseUtils } from '../../utils/base.js';
	import {mapMutations} from 'vuex';
	export default {
		data() {
			return {
				phoneNum:'',
				password:'',
				isLoading:false
			};
		},
		onShow() {
			this.USER_IF_LOGIN(false);
			this.$clearLocal();
		},
		methods:{
			...mapMutations([
				'USER_IF_LOGIN'
			]),
			loginIn(){
				const _ =this;
				if(_.phoneNum == ''){
					return _.$showToast('请输入您的手机号码');
				}else if(!baseUtils.$exp.phone.test(_.phoneNum)){
					return _.$showToast('请输入正确的手机号码');
				}else if(_.password == ''){
					return _.$showToast('请输入登录密码');
				}else{
					_.loginInAxios();
				}
			},
			async loginInAxios(){
				const _ =this;
				if(_.isLoading){
					return _.$showToast('登录中,请稍后...');
				}
				_.isLoading = true;
				_.$http('/api/unAuth/login','POST',{
					mobile:_.phoneNum,
					password:_.password
				}).then(res=>{
					_.isLoading = false;
					if(res && res.data.code == '0'){
						_.USER_IF_LOGIN(true);
						uni.setStorageSync('token',res.data.data.token);
						uni.setStorageSync('userInfo',res.data.data.user);
						_.$showToast('登录成功～');
						_.$tabTo('../index/index');
					}else{
						_.$showToast(res.data.msg);
					}
				}).catch(()=>{
					_.isLoading = false;
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login{
		width: 100%;
		min-height: 100vh;
		background-color: $ych_color;
		@include flex_cloumn_center;

		.btn_xy{
			position: fixed;
			font-size: 28rpx;
			@include flex_center;
			width: 100%;
			bottom: 80rpx;
			color: #fff;
		}

		.login_warp{
			width: 606rpx;
			min-height: 681rpx;
			position:relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			.login_warp_p{
				box-sizing: border-box;
				position:relative;
				width: 100%;
				height: 100%;
				border-radius: 40rpx;
				padding: 90rpx 64rpx 32rpx;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				z-index: 100;
			}
			.lgoo_top{
				width: 180rpx;height: 180rpx;
				position: absolute;
				top: -120rpx;
				image{
					border-radius: 20rpx;
				}
			}
			.login_input{
				width: 100%;
				border: solid 2rpx $ych_color;
				border-radius: 40rpx;
				margin-top: 56rpx;
				height: 80rpx;
				box-sizing: border-box;
				padding: 19rpx 0 19rpx 90rpx;
				&.phone{
					background: url('/static/ico/phone@2x.png') no-repeat 40rpx center;
					background-size: 26rpx 40rpx;
				}
				&.safe{
					background: url('/static/ico/safe@2x.png') no-repeat 40rpx center;
					background-size: 28rpx 36rpx;
				}
			}
			.login_btn{
				width: 100%;
				background-color: #fff;
				height: 88rpx;
				border-radius: 44rpx;
				font-size: 32rpx;
				@include flex_center;
				border:none;
				margin-top: 20rpx;
				&::after{
					border:none;
				}
				&.loginIn{
					background-color: $ych_color;
					margin-top: 60rpx;
					color: #fff;
				}
			}
			.register_btn{
				height: 100rpx;
				width: 85%;
				background-color: #63A9FE;
				border-radius: 32rpx;
				@include flex_center;
				color: #fff;
				font-size: 30rpx;
				position: absolute;
				bottom: -100rpx;
				padding-top: 20rpx;
				z-index: 1;
			}
		}
	}
</style>
